<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <meta name="renderer" content="webkit" />
	    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
        <title></title>
	    <script src="./js/common/axios.min.js"></script>
        <script src="./js/common/vue.js"></script>
        <script src="./js/common/template.js"></script>
        <script src="./js/common/vue-resource.js"></script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
        <link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
        <script type="text/javascript" src="js/common/jquery.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
        <script src="https://cdn.bootcss.com/moment.js/2.22.0/moment-with-locales.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
        <link rel="stylesheet" href="css/common/swiper.css">
        <link rel="stylesheet" href="css/common/base.css">
        <link rel="stylesheet" href="css/common/media.css">
        <style>
            .white.box>.orange{
                position: relative;
                overflow: hidden;
            }
            .white.box>.orange input{
                display: none;
                position: absolute;
            }
        </style>
    </head>
    <body>

        <div id="zgw">
            <div id="palace" class="flex">
                <v-nav></v-nav>
                <v-main></v-main>
            </div>
        </div>

        <template id="vMain">
            <div class="content overAuto">
                <div class="bfr">
                    <div class="fltrBox white flex flex-wrap box">
                        <div class="fg flex flex-align-items">
                            任务名称 <div class="inp"><input type="text" v-model="task" placeholder="请输入"></div>
                        </div>
                        
                        <div class="fg flex flex-align-items">
                            生成时间
                            <div class="inp input-group date" id='datetimepicker1'>
                                <span class="fill input-group-addon">
                                    <span class="glyphicon vc glyphicon-calendar"></span>
                                </span>
                                <input type='text' class="rptTime" class="timeInput" id="date"/>
                            </div>                        
                        </div>
                        <div class="fg flex flex-align-items">
                            状态
                            <div class="slct">
                                <input type="text" class='status' :value="statusAry[optInd]" readonly>
                                <div class="opt">
                                    <p v-for="(item,i) in statusAry" @click="chs(i)" :data-status="i" :class="i == optInd?'active':''">{{item}}</p>
                                </div>
                            </div>
                        </div>
                        <div class="blue btn" @click="search">查询</div>
                    </div>
                    <div class="white box">
                        <div class="btn orange">报表导入<input type="file"></div>
                    </div>
                    <div class="tableBox overAuto">
                        <table class="white">
                            <thead>
                                <!--
                                <td>
                                    <div class="chsBox"><p class="chs"><img src="img/gou.png"></p></div>
                                </td>
                                -->
                                <td v-for="(item,i) in thd">
                                    <div :style="'min-width:' + item.width + 'px'">{{item.name}}</div>
                                </td>
                            </thead>
                            <tbody>
                                <tr v-for="(item,i) in tblData">
                                    <td v-for="(value,key) in item" :class="[key == 'status'?'status':'',key == 'file'?'file':'']">
                                        <div>
                                            <template v-if="key == 'status'">
                                                {{statusAry[value]}}
                                            </template>
                                            <template v-else-if="key == 'btns'">
                                                <div class="btns">
                                                    <span @click="act(bItm.cls,i)" :class="['btn',bItm.cls]" v-for="(bItm,b) in value" v-if="!b || (b && item.status == 2)">{{bItm.name}}</span>
                                                </div>
                                            </template>
                                            <template v-else>{{value}}</template>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="aft" v-if="info && curInd != undefined">
                    <p class="ttl1">任务详情 <span class="btn make blue vc">生成快照</span></p>
                    <div class="box white">
                        <p class="ttl2">任务信息</p>
                        <div class="valBox">
                            <div class="fv flex"><span class="lbl">某某名称</span> <span class="val">内容内容内容内容内容</span></div>
                            <div class="fv flex"><span class="lbl">某某名称</span> <span class="val">内容内容内容内容内容</span></div>
                            <div class="fv flex"><span class="lbl">某某名称</span> <span class="val">内容内容内容内容内容</span></div>
                            <div class="fv flex"><span class="lbl">某某名称</span> <span class="val">内容内容内容内容内容</span></div>
                        </div>
                    </div>
                    <div class="box white">
                        <p class="ttl2">分配详情</p>
                        <div class="valBox">
                            <div class="fv flex"><span class="lbl">分配单位</span><span class="val">{{info.give}}</span></div>
                            <div class="fv flex"><span class="lbl">分配时间</span><span class="val">{{info.giveTime}}</span></div>
                            <div class="fv flex" style="width: 100%;"><span class="lbl">其他事项说明</span><span class="val">--</span></div>
                        </div>
                    </div>
                    <div class="btns">
                        <p @click="cancel" class="cancel btn">返回</p>
                    </div>
                </div>
                <div class="window hvc white">
                    <p class="ttl">选择分配单位 <span class="close vc cursor"></span></p>
                    <div class="rdo">
                        <p>单位1 <span class="vc"></span></p>
                        <p>单位2 <span class="vc"></span></p>
                        <p>单位3 <span class="vc"></span></p>
                    </div>
                </div>
            </div>
        </template>
        
        <script src="js/common/swiper.js"></script>
        <script src="./js/common/dataUrl.js"></script>
        <script src="js/common/header.js"></script>
        <script src="js/common/footer.js"></script>
        <script>
            
            var picker1;
            var add = null;
            var contn = new Vue({
                el:'#zgw',
                data:{
                
                },
                methods:{
                    
                },
                mounted:function(){
                    ifMounted = true;
                },
                components:{
                    vMain:{
                        template: '#vMain',
                        data:function(){
                            return{
                                optInd:0,
                                statusAry:['全部','待分配','已分配'],
                                task:'',
                                thd:[
                                    {name:'ID',width:120},
                                    {name:'任务名称',width:120},
                                    {name:'生成时间',width:120},
                                    {name:'分配单位',width:120},
                                    {name:'分配时间',width:120},
                                    {name:'状态',width:120},
                                    {name:'操作',width:150},
                                ],
                                cashRest:552154,
                                info:'',
                                tblData:[
                                    {ID:'1245675213',task:'任务1',createTime:'2022-02-02',give:'某某单位',giveTime:'2022-02-02',status:2,btns:[{name:'清除分配',cls:'red clear'},{name:'查看',cls:'read orange'}]},
                                    {ID:'1245675213',task:'任务2',createTime:'2022-03-02',give:'某某单位',giveTime:'2022-03-02',status:2,btns:[{name:'清除分配',cls:'red clear'},{name:'查看',cls:'read orange'}]},
                                    {ID:'1245675213',task:'任务3',createTime:'2022-04-20',give:'',giveTime:'',status:1,btns:[{name:'任务分配',cls:'blue give'},{name:'查看',cls:'read orange'}]},
                                    {ID:'1245675213',task:'任务3',createTime:'2022-04-27',give:'',giveTime:'',status:1,btns:[{name:'任务分配',cls:'blue give'},{name:'查看',cls:'read orange'}]},
                                ],
                                curInd:undefined
                            }
                        },
                        methods:{
                            act(cls,ind){
                                var This = this;
                                var list = This.tblData;
                                This.curInd = ind;
                                if(cls.indexOf('read') >= 0){
                                    This.info = This.tblData[ind];
                                    swtActive('#palace .content .bfr');
                                    setTimeout(function(){
                                        $('.submit').click(function(){
                                            This.info.status = 2;
                                            var newList = This.tblData;
                                            //newList[This.curInd].status = 2;
                                            This.tblData = newList;
                                            This.tblData = newList;
                                            showModel('提交成功');
                                        })
                                        $('.make').click(function(){
                                            showModel('生成快照成功');
                                        })
                                    },10)
                                    
                                }else if(cls.indexOf('clear') >= 0){
                                    list[ind].give = list[ind].giveTime = '';;
                                    list[ind].status = 1;
                                    list[ind]['btns'][0].cls = 'blue give';
                                    list[ind]['btns'][0].name = '任务分配';
                                    This.tblData = list;
                                    showModel('已清除');
                                }else if(cls.indexOf('give') >= 0){
                                    $('.window .rdo p').removeClass('active');
                                    swtActive('.window');

                                }
                            },
                            formatPrice(price){
                               return String(price).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
                            },
                            cancel(){
                                swtActive('#palace .content .bfr');
                                this.curInd = undefined
                            },
                            chs(i){
                                this.optInd = i;
                            },
                            timeTrans(time){
                                var date = new Date(time);
                                var seperator1 = "-";
                                var seperator2 = ":";
                                var month = date.getMonth() + 1<10? "0"+(date.getMonth() + 1):date.getMonth() + 1;
                                var strDate = date.getDate() < 10? "0" + date.getDate():date.getDate();
                                var hrs = date.getHours() < 10?"0" + date.getHours():date.getHours();
                                var mins = date.getMinutes() < 10?"0" + date.getMinutes():date.getMinutes();
                                var scds = date.getSeconds() < 10?"0" + date.getSeconds():date.getSeconds();
                                var currentdate = date.getFullYear() + '-' + month + '-' + strDate + " " +  hrs + ':' + mins + ':' + scds;
                                return currentdate;
                            },
                            search(){
                                var This = this;
                                $('table tbody tr').removeClass('hidden');
                                var rptTime = new Date($('.rptTime').val()).getTime();
                                this.tblData.forEach(function(item,i){
                                    if(
                                        (item.status != This.optInd && This.optInd)
                                        ||
                                        (rptTime && new Date(item.createTime).getTime() != rptTime)
                                        ||
                                        (This.task.replace(/\s+/g,'').length && item.task.indexOf(This.task) < 0)
                                    ){
                                        $('table tbody tr').eq(i).addClass('hidden');
                                    }
                                })
                            }
                        },
                        mounted(){
                            var This = this;
                            $('.window .close').click(function(){
                                swtActive('.window');
                            })
                            $('.window .rdo p span').click(function(){
                                var list = This.tblData;
                                list[This.curInd].give = $(this).parent().text();
                                list[This.curInd].status = 2;
                                list[This.curInd].giveTime = timeTrans(new Date().getTime()).split(' ')[0];
                                list[This.curInd]['btns'][0].cls = 'red clear';
                                list[This.curInd]['btns'][0].name = '清除分配';
                                This.tblData = list;
                                showModel('已分配');
                                swtActive('.window');
                                $('.window .rdo p').removeClass('active');
                                $(this).parent().addClass('active');
                            })
                            
                            $('.white.box>.orange').click(function(){
                                $(this).find('input')[0].click();
                            })
                            $('.white.box>.orange input').change(function(){
                                if ($(this).val() != ''){
                                    showModel('导入成功');
                                }
                            })
                            
                        }
                    },

                }
            })
            
        </script>
        <script src="js/common/common.js"></script>
        <script src="js/index.js"></script>
    </body>
</html>